<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
	<title>Template Designer</title>
	<meta http-equiv="content-type" content="text/html; charset=gb2312"/>
	<meta name="author" content="yangzheng@evmtv.com"/>
	<meta name="description" content="EMSP_CMS.TemplateDesigner"/>
	<meta name="x_class" content="com.evmtv.emsp_cms.templateDesigner"/>
	<link href="${rc.contextPath}/swatlib/SwatWeb/spark/spark.css" rel="stylesheet" type="text/css"/>
</head>

<style type="text/css">
body							{padding:0px;margin:0px;color:#ccc;font:normal 14px tahoma;background:#34383E;overflow:hidden}
#div							{border:1px dotted #cc0}

/** border */
.Panel_H						{background:#5F686D url(${rc.contextPath}/templateDesginer/assets/images/panel_orn_h.png) repeat-y;border-left:1px solid #828A90;border-top:1px solid #828A90;border-right:1px solid #0a0a0a;border-bottom:1px solid #0a0a0a}
.Panel_V						{background:#5F686D url(${rc.contextPath}/templateDesginer/assets/images/panel_orn_v.png) repeat-x;border-left:1px solid #828A90;border-top:1px solid #828A90;border-right:1px solid #0a0a0a;border-bottom:1px solid #0a0a0a}

/** named */
#eWorkspace						{position:absolute;z-index:0;overflow:auto}
#ePanel_Menu					{position:absolute;width:400px;height:75px;left:0px;top:0px;z-index:100;background:#5F686D url(${rc.contextPath}/templateDesginer/assets/images/panel_menu_bkg.png) no-repeat}
#ePanel_QuickBar				{position:absolute;width:400px;height:75px;left:401px;top:0px;z-index:10;background2:#5F686D url(${rc.contextPath}/templateDesginer/assets/images/panel_toolbar_bkg.png) repeat-x}
#ePanel_Project					{position:absolute;width:280px;height:400px;left:0px;top:76px;z-index:10;padding-top:10px}
#ePanel_MenuBar					{position:absolute;width:300px;height:24px;left:25px;top:47px;z-index:0;border2:1px solid #00c}
#ePanel_Info					{position:absolute;width:400px;height:30px;left:401px;top:76px;z-index:10}

.ePanel_Project_Sheet			{width:100%;height:100%;background:#5F686D}
#eSheet_TemplateProp			{background:#20292E}
#eSheet_ElemStruct				{background:#303138}
#eSheet_Comp					{background:#20292E}
#eSheet_Comp_Content			{width:100%}
#eHotCompIndicator				{position:absolute;left:0px;top:0px;width:48px;height:48px;z-index:30;border2:1px solid #c00}
#eSheet_CompProp				{background:#20292E}

/** Template */
.T_Normal						{position:absolute;z-index:0;background:#5F686D;overflow2:hidden;border:2px solid #111}
.T_Normal .grid					{position:absolute;z-index:1;background:url(${rc.contextPath}/templateDesginer/assets/images/ui_grid_dot_20x20.png)}
.T_Normal .safearea				{position:absolute;z-index:2;background:;border:40px solid #114a11}
.T_Normal .code					{position:absolute;z-index:3;background:#333;border:0px solid #114a11;display:none}
.T_Normal .codearea				{position:absolute;z-index:3;background:#181818;border:0px;overflow:auto;font:normal 14px Consolas;color:#fff}

/** Component in Template */
.T_Component					{position:absolute;z-index:20;border:1px dashed #eee;background:#001c38;overflow2:hidden}
.T_Component div				{position:absolute}
.T_Component .icon				{left:0px;top:0px;width:48px;height:48px}
.T_Component .info				{left:55px;top:15px;height:20px;background2:#f00;font:normal 11px tahoma;color:#fff;border2:1px solid #ff0}

/** Standard Controls */
.CMS_CtrlRow					{border2:1px solid #c00;height:40px;font:normal 16px Consolas;text-align:center}
.CMS_CtrlRow div				{float:left;font:normal 16px Tahoma}
.CMS_CtrlRow .caption			{margin-right:5px;padding-top:3px;color:#eee;width:100px;text-align:right}
.CMS_CtrlRow .cap2				{margin-right:5px;margin-left:5px;padding-top:3px;color:#eee;text-align:right}
.CMS_CtrlRow input				{width:100%;height:25px;font:normal 16px Consolas;color:#aaa;background:#333;border-left:1px solid #111;border-top:1px solid #111;border-right:1px solid #444;border-bottom:1px solid #444}
.CMS_CtrlRow textarea			{width:100%;font:normal 16px Consolas;color:#aaa;background:#333;border-left:1px solid #000;border-top:1px solid #000;border-right:1px solid #405253;border-bottom:1px solid #405253}
.CMS_CtrlRow button				{width:120px;height:32px;font:normal 16px 微软雅黑;margin-left:10px;margin-right:10px}

/** Componets item */
.CMS_ComponentItem				{float:left;width:68px;height:75px;text-align2:center;border2:1px solid #c00}
.CMS_ComponentItem_Icon			{width:48px;height:48px;margin-left:5px;border2:1px solid #c00}
.CMS_ComponentItem_Text			{width:60px;height:12px;text-align:center;font:normal 12px Consolas;color:#aaa}

/** spark override */
.SxSheetGroup					{}
.SxSheetGroup_TabBar			{width:100%;height:16px;font:normal 12px Tahoma;text-align:left}
.SxSheetGroup_TabBar div		{float:left;white-space:nowrap;height:22px;line-height:22px;cursor:default}
.SxSheetGroup_Tab				{padding:0px 8px 0px 8px;color:#888;background:url(${rc.contextPath}/templateDesginer/assets/images/spark_sheetgroup_bar.png) no-repeat 0 0;border:1px solid #000}
.SxSheetGroup_Tab_h				{padding:0px 8px 0px 8px;height:22px;color:#fff;background:url(${rc.contextPath}/templateDesginer/assets/images/spark_sheetgroup_bar.png) no-repeat 0 -24;border:1px solid #000}
.SxSheetGroup_Tab_Active		{padding:0px 8px 0px 8px;height:22px;color:#ccc;background:url(${rc.contextPath}/templateDesginer/assets/images/spark_sheetgroup_bar.png) no-repeat 0 -48;border:1px solid #000}
.SxSheetGroup_Content			{width:100%;height:100%;overflow:hidden;border:2px inset #5F686D;padding:0px}

.SxDialog						{position:absolute;display:none}
.SxDialog_Cover					{position:absolute;left:0px;top:0px;background:#444}
.SxDialog_Frame					{position:absolute;left:0px;top:0px;background:#5F686D;border:2px solid #000}
.SxDialog_Title					{background:#111;border-left:1px solid #555;border-top:1px solid #555;border-right:1px solid #000;border-bottom:1px solid #000;font:normal 16px 微软雅黑}

.SxStackList_Common				{font:normal 14px Consolas;color:#888}
.SxStackList_Pane				{width:100%}
.SxStackList_Pane_Title			{padding-left:10px;height:27px;background:url(${rc.contextPath}/templateDesginer/assets/images/spark_stackList_bar.png) repeat-x 0 0;border:0px;border-left:1px solid #000;border-right:1px solid #000;line-height:27px;}
.SxStackList_Pane_Title_h		{padding-left:10px;height:27px;background:url(${rc.contextPath}/templateDesginer/assets/images/spark_stackList_bar.png) repeat-x 0 -54;color:#cc0;border:0px;border-left:1px solid #000;border-right:1px solid #000;line-height:27px}
.SxStackList_Pane_Title_Active	{padding-left:10px;height:27px;background:url(${rc.contextPath}/templateDesginer/assets/images/spark_stackList_bar.png) repeat-x 0 -27;color:#fff;border:0px;border-left:1px solid #000;border-right:1px solid #000;line-height:27px}
.SxStackList_Pane_Content		{border:0px solid #666;background:url(${rc.contextPath}/templateDesginer/assets/images/spark_stackList_group_bkg.png)}

.SxQuickTips_Frame				{position:absolute;background:#f4f9be;display:none;border:1px solid #443f01;padding:3px 20px 3px 20px;font:normal 14px Tahoma;color:#000;z-index:65000}

.SxActiveTree_Frame .CI_Close		{float:left;width:20px;height:23px;background:url(${rc.contextPath}/templateDesginer/assets/images/spark_activetree_ctrlIcon.png) no-repeat 0 0}
.SxActiveTree_Frame .CI_CloseH		{float:left;width:20px;height:23px;background:url(${rc.contextPath}/templateDesginer/assets/images/spark_activetree_ctrlIcon.png) no-repeat 0 -20}
.SxActiveTree_Frame .CI_Open		{float:left;width:20px;height:23px;background:url(${rc.contextPath}/templateDesginer/assets/images/spark_activetree_ctrlIcon.png) no-repeat 0 -40}
.SxActiveTree_Frame .CI_OpenH		{float:left;width:20px;height:23px;background:url(${rc.contextPath}/templateDesginer/assets/images/spark_activetree_ctrlIcon.png) no-repeat 0 -60}
.SxActiveTree_Frame .lineH			{float:left;background:url(${rc.contextPath}/templateDesginer/assets/images/spark_activetree_hotitem_bkg.png) no-repeat left 0;color:#ccc}
.SxActiveTree_Frame .lineSelected	{float:left;background:url(${rc.contextPath}/templateDesginer/assets/images/spark_activetree_hotitem_bkg.png) no-repeat left -23;color:#fff}
.SxActiveTree_Frame .REdgeH			{float:right;width:3px;height:23px;background:url(${rc.contextPath}/templateDesginer/assets/images/spark_activetree_hotitem_bkg.png) no-repeat right 0}
.SxActiveTree_Frame .REdgeSelected	{float:right;width:3px;height:23px;background:url(${rc.contextPath}/templateDesginer/assets/images/spark_activetree_hotitem_bkg.png) no-repeat right -23}

.SxPropertyEditor				{}
.SxPropertyEditor_Frame			{position:absolute;width:100%;height:auto;border2:1px solid #0c0}
.SxPropertyEditor_Content		{width:100%;height:auto;border:1px solid #c00}
.SxPropertyEditor_Key			{float:left;width:40%;height:28px;background:url(${rc.contextPath}/templateDesginer/assets/images/propeditor_key_bkg.png) repeat-x bottom right;line-height2:25px;font:normal 14px Consolas;color:#888;padding-left:5px;padding-top:3px}
.SxPropertyEditor_Value			{float:left;width:60%;height:28px;background:url(${rc.contextPath}/templateDesginer/assets/images/propeditor_value_bkg.png) repeat-x bottom;line-height:25px;color:#888;border2:1px solid #c00}
.SxPropertyEditor_Ctrl_Text		{height:24px;background:#13191c;border:0px;color:#02a4e0;font:normal 14px Segoe UI}

.SxMainMenu						{position:absolute;font:normal 14px 微软雅黑;cursor:default}
.SxMainMenu .content			{background:#b7c0c5;color:#111;border:2px solid #111}
.SxMainMenu .topItem			{height:20px;line-height:20px;text-align:center}
.SxMainMenu .topItemHover		{height:20px;line-height:20px;text-align:center;background:#394546}
.SxMainMenu .item				{height:20px;line-height:20px;text-align:left;background:#b7c0c5;padding:5px 0px 5px 0px}
.SxMainMenu .hover				{height:20px;line-height:20px;text-align:left;background:#5d6a73;color:#fff;padding:5px 0px 5px 0px}
.SxMainMenu .separator			{height:1px;background:#b7c0c5;border-bottom:2px solid #8f9ba1;font-size:0px}
.SxMainMenu .check				{position2:absolute;float:left;width:22px;height:20px;left:0px;top:0px;height:20px;background:url(${rc.contextPath}/templateDesginer/assets/images/spark_menu_icon_check.png) no-repeat 0 0}
.SxMainMenu .text				{position2:absolute;float:left;height:20px;left:0px;top:0px;height:20px;line-height:20px;background:;}
</style>

<!--import libs-->
<script type="text/javascript" language="javascript" src="${rc.contextPath}/swatlib/SwatWeb/swat3.js"></script>
<script type="text/javascript" language="javascript" src="${rc.contextPath}/swatlib/SwatWeb/spark/spark.common.js"></script>
<script type="text/javascript" language="javascript" src="${rc.contextPath}/swatlib/SwatWeb/spark/Menu.js"></script>
<script type="text/javascript" language="javascript" src="${rc.contextPath}/swatlib/SwatWeb/spark/Group.js"></script>
<script type="text/javascript" language="javascript" src="${rc.contextPath}/swatlib/SwatWeb/spark/SheetGroup.js"></script>
<script type="text/javascript" language="javascript" src="${rc.contextPath}/swatlib/SwatWeb/spark/StackList.js"></script>
<script type="text/javascript" language="javascript" src="${rc.contextPath}/swatlib/SwatWeb/spark/ActiveTree.js"></script>
<script type="text/javascript" language="javascript" src="${rc.contextPath}/swatlib/SwatWeb/spark/border.js"></script>
<script type="text/javascript" language="javascript" src="${rc.contextPath}/swatlib/SwatWeb/spark/Dialog.js"></script>
<script type="text/javascript" language="javascript" src="${rc.contextPath}/swatlib/SwatWeb/spark/QuickTips.js"></script>

<!--import data-->
<script type="text/javascript" language="javascript" src="${rc.contextPath}/templateDesigner/assets/data/D_components.js"></script>
<script type="text/javascript" language="javascript" src="${rc.contextPath}/templateDesigner/assets/data/D_code.js"></script>
<script type="text/javascript" language="javascript" src="${rc.contextPath}/templateDesigner/assets/data/D_menus.js"></script>

<script type="text/javascript">

/////////////
scumix.swat.spark.PropertyEditor = $.newClass();
scumix.swat.spark.PropertyEditor.prototype =
{
	constructor: function( P )
	{
		this.id = $.makeGlobalId( 'SxPropertyEditor' );

		this.width = P && P.width || '100%';
		this.height = P && P.height || '100%';
		this.animLevel = P ? $.defaultValue( P.animLevel , 1 ) : 1;

		this.properties = new Array();

		this.EContainer = $E(P.container) || null;
		this.EFrame = null;
		this.EContent = null;
		this.EContentTB = null;

		this.initView( P );
	},

	initView: function( P )
	{
		with( this )
		{
			if( !EContainer ) return false;
			EFrame = $.createElement({type:'div',id:id + '_Frame',css:'',attr:{className:'SxPropertyEditor_Frame'}});
			EContainer.appendChild( EFrame );
		}
	},

	clear: function()
	{
		with( this )
		{
			for( var i in properties )
			{
				var it = properties[i];
				it.eValue.removeChild( it.eCtrl );
				EFrame.removeChild( it.eKey );
				EFrame.removeChild( it.eValue );
				delete properties[i];
			}
		}

		return this;
	},

	addProperty: function( P, S )
	{
		with( this )
		{
			var K, V, C
				,rid = id + '_R' + properties.length
				,DV = P.defaultValue || ''
				;

			K = $.createElement({type:'div',id:rid,css:'',attr:{className:'SxPropertyEditor_Key',exDragable:1,exSizable:1,exSizeDir:'R',innerHTML:P.text}});
				$(K).event( 'resize', function()
						{
							$(this.id+'_V').css('width', $(EFrame).css('width') - $(this).css('width'));
							$(this.id+'_C').css('width', $(EFrame).css('width') - $(this).css('width'));
							$ERR(this.id);
						})
					;
			EFrame.appendChild( K );

			V = $.createElement({type:'div',id:rid + '_V',css:'',attr:{className:'SxPropertyEditor_Value'}});
			switch( P.type )
			{
				default:
				case 'text':
					C = $.createElement({type:'input',id:rid + '_C',css:'',attr:{className:'SxPropertyEditor_Ctrl_Text',type:'text',value:DV}});
					$(C).css('width','100%');

					// 若有关联数据, 则调用组件取属性方法
					if( P.field ) C.value = S.getProperty( P );

					break;
			}

			V.appendChild( C );
			EFrame.appendChild( V );

			var o = {id:P.id, rid:rid, eKey:K, eValue:V, eCtrl:C}
			properties[o.id] = o;
		}

		return this;
	},

	getProperty: function( ID )
	{
		with( this )
		{
			return properties[ID] ? $(properties[ID].eCtrl).value() : '';
		}
	},

	setProperty: function( ID, V )
	{
		with( this )
		{
			if( properties[ID] )
			{
				$(properties[ID].eCtrl).value( V );
			}
		}

		return this;
	}
}

// 类注册
Namespace.register( 'emsp_cms' );
//
// 组件
//
emsp_cms.Component = $.newClass();
emsp_cms.Component.prototype =
{
	constructor: function( P )
	{
		this.id = $.makeGlobalId( 'xComp_' );

		this.componentName = '';
		this.text = '';

		this.data = 0;
		this.parentTemplate = 0;
		this.elemComponent = 0;
		this.elemTips = 0;
		this.elemIcon = 0;
		this.elemTag = 0;

		this.onGetHtmlCode = 0;

		this.doCreate( P );
	},

	doCreate: function( P )
	{
		with( this )
		{
			var T = Designer.templateManager.curTemplate.elemTemplate
				,data = D = DS_Components.nodes[P.groupID].comps[P.compID]
				,x = P.x ? P.x - $(T).css('left') : 0
				,y = P.y ? P.y - $(T).css('top') : 0
				,w = P.w ? P.w - $(T).css('w') : 280
				,h = P.h ? P.h - $(T).css('h') : 100
				;

			componentName = D.text;
			onGetHtmlCode = D.onGetHtmlCode || 0;

			if( D.onCreate )
			{
				elemComponent = D.onCreate( {id:id, x:x, y:y, w:w, h:h, xJsObject:this} );
			}

			else
			{
				elemComponent = $.createElement({type:'div',id:id,css:'',attr:{className:'T_Component', xText:D.text,exDragable:'1',exTopOnDrag:'1',exSizable:'1'}});
					$(elemComponent).css('left', x).css('top', y).css('width', w).css('height', h).css('opacity',60);

				elemIcon = $.createElement({type:'div',id:id + '_Icon',css:'',attr:{className:'icon',exPass:'1'}});
					//$(elemIcon).css('opacity2',40).css('top',-20);
					elemIcon.style.background = 'url(' + DS_Components.nodes[P.groupID].glyphSrc + ') no-repeat -' + D.glyph.x + ' -' + D.glyph.y;
					elemComponent.appendChild(elemIcon);

				elemTips = $.createElement({type:'div',id:id + '_T',css:'',attr:{className:'info',exPass:'1'}});
					$(elemTips).css('opacity',40);
					elemTips.innerHTML = D.text + ' [' + x + ':' + y + ' - ' + w + ':' + h + ']';
					elemComponent.appendChild(elemTips);

				/*elemTag = $.createElement( {type:'div', id:id + '_Tag', css:'position:absolute;width:100px;height:20px;background:#c00', attr:{xGroup:'tag', className:'T_Component_Tag',exPass:'1'}} );
				$(elemTag).css('width', 200 )
					.css('height', 20)
					.css('left', -10)
					.css('top', -20)
					;
					elemComponent.appendChild( elemTag );*/
			}

			elemComponent.xJsObject = this;
			$(elemComponent)
				.event( 'mousedown', function()
					{
						var E = $.getEvent();

						with( this.xJsObject.parentTemplate )
						{
							// 设为当前组件
							setCurrentComponent( this.xJsObject );

							// 计算可拖动区域
							var r = $(elemTemplate).css('width') - $(this).css('width') - 4,
							b = $(elemTemplate).css('height') - $(this).css('height') - 4;
						}

						// 未按 alt 键时, 设置限定移动范围
						// 按下 alt 键时, 可移动至模板区域外
						if( !E.altKey )
							$(this).attr('exDragRect', {left:0,top:0,right:r,bottom:b});
						else
							$(this).attr('exDragRect', 0);

						// 更新属性编辑器
						with( Designer.templateManager.curTemplate )
						{
							if( lastComponent != this.xJsObject )
							{
								lastComponent = this.xJsObject;
								Designer.workspace.updateComponentProperty( this.xJsObject );

								Designer.atree_ElemStruct.rootObject.setCurItem( Designer.atree_ElemStruct.items[ this.xJsObject.id ] );
							}
						}
					})
				.event( 'resize', function()
					{
						var o = $(this), el = $E(this.id + '_T');
						if( Designer.templateManager.curTemplate.m_snapToGrid )
						{
							with( Designer.workspace )
								o.css('width', parseInt( o.css('width') / gridSize ) * gridSize ).css( 'height', parseInt( o.css('height') / gridSize ) * gridSize );
						}

						if( el ) el.innerHTML = o.attr('xText') + ' [' + o.css('left') + ':' + o.css('top') + ' - ' + o.css('width') + ':' + o.css('height') + ']';

						// 更新属性编辑器
						Designer.proped_CurComp
							.setProperty('width', o.css('width'))
							.setProperty('height', o.css('height'))
							;
					})
				.event( 'move', function()
					{
						var o = $(this), el = $E(this.id + '_T');
						if( Designer.templateManager.curTemplate.m_snapToGrid )
						{
							with( Designer.workspace )
								o.css('left', parseInt( o.css('left') / gridSize ) * gridSize ).css( 'top', parseInt( o.css('top') / gridSize ) * gridSize );
						}
						if( el ) el.innerHTML = o.attr('xText') + ' [' + o.css('left') + ':' + o.css('top') + ' - ' + o.css('width') + ':' + o.css('height') + ']';

						// 更新属性编辑器
						Designer.proped_CurComp
							.setProperty('left', o.css('left'))
							.setProperty('top', o.css('top'))
							;
					});
		}
	},

	getProperty: function( P )
	{
		var r;
		with( P )
		{
			if( '|left|top|width|height|background|'.indexOf('|' + field + '|') > -1 ) r = $(this.elemComponent).css(field);
			else r = this[field];

			if( r == undefined ) r = '';
			return r;
		}
	},

	genHtmlCode: function()
	{
		with( this )
		{
			if( !onGetHtmlCode ) return '';
			return onGetHtmlCode(this);
		}
	}
}

//
// 模板
//
emsp_cms.Template = $.newClass();
emsp_cms.Template.prototype =
{
	constructor: function(  P )
	{
		this.id = $.makeGlobalId( 'xTemplate_' );

		this.animLevel = P ? $.defaultValue( P.animLevel , 1 ) : 1;

		this.db =
		{
			fname: P.db.fname || '无标题',
			falias: P.db.falias || '',
			fauthor: P.db.fauthor || 'admin',
			fdesc: P.db.fdesc || '',
			fwidth: P.db.fwidth || '0',
			fheight: P.db.fheight || '0',
			flayout: P.db.flayout || 0,
			fdefinition: P.db.fdefinition || 'HD'
		}

		this.parentManager = 0;
		this.elemTemplate = 0;
		this.elemGrid = 0;
		this.elemSA = 0;
		this.elemTag = 0;
		this.elemCode = 0;
		this.elemCodeArea = 0;

		this.components = new Array();
		this.curComponent = 0;
		this.lastComponent = 0;

		this.m_showGrid = 1;
		this.m_showSA = 1;
		this.m_showCode = 1;
		this.m_snapToGrid = 0;
		this.m_showAnim = 1;

		this.doCreate( P );
	},

	doCreate: function( P )
	{
		with( this )
		{
			// 创建关联 DOM 对象
			elemTemplate = $.createElement( {type:'div', id:id + '_Wnd', css:'', attr:{xJsObject:this, xGroup:'template', className:'T_Normal',exDragable:'1',exTopOnDrag:'1',exSizable:'1'}} );
				$(elemTemplate).css('width', P.width).css('height', P.height)
					.css('left', Designer.workspace.factLeft).css('top', Designer.workspace.factTop)
					.event( 'resize', function()
						{
							var I = $(this);
							$(this.xJsObject.elemGrid).css('width', I.css('width')-4).css('height', I.css('height')-4);
							$(this.xJsObject.elemSA).css('width', I.css('width')-4).css('height', I.css('height')-4);
							//$(this.xJsObject.elemSA).css('width', I.css('width')-44).css('height', I.css('height')-44);
							$(this.xJsObject.elemCode).css('width', I.css('width')-4).css('height', I.css('height')-4);
							$(this.xJsObject.elemCodeArea).css('width', I.css('width')-12).css('height', I.css('height')-38);
						})
					.event( 'mousedown', function()
						{
							Designer.templateManager.setCurrentTemplate( this.xJsObject );
							if( $.getTarget().xGroup == 'template' )
							{
								this.xJsObject.setCurrentComponent(null);
								Designer.proped_CurComp.clear();
							}
						});

			/*elemTag = $.createElement( {type:'div', id:id + '_Grid', css:'position:absolute;width:200px;height:30px;background:#c00', attr:{xGroup:'tag', className:'T_Normal_Tag',exPass:'1'}} );
				$(elemTag).css('width', 200 )
					.css('height', 30)
					.css('left', 0)
					.css('top', -30)
					.css('opacity',50)
					;
				elemTemplate.appendChild( elemTag );*/

			elemGrid = $.createElement( {type:'div', id:id + '_Grid', css:'', attr:{xGroup:'template', className:'grid',exPass:'1',exSizable:'1'}} );
				$(elemGrid).css('width', P.width-4 )
					.css('height', P.height-4)
					.css('opacity', 30);
				elemTemplate.appendChild( elemGrid );

			elemSA = $.createElement( {type:'div', id:id + '_SA', css:'', attr:{xGroup:'template', className:'safearea',exPass:'1',exSizable:'1'}} );
				$(elemSA).css('width', P.width-4)
					.css('height', P.height-4)
					.css('left', 0)
					.css('top', 0)
					.css('opacity', 50);
				elemTemplate.appendChild( elemSA );

			elemCode = $.createElement( {type:'div', id:id + '_Code', css:'', attr:{xGroup:'code', className:'code',exPass:'1',exSizable:'1'}} );
				$(elemCode).css('width', P.width-4)
					.css('height', P.height-4)
					.css('left', 0)
					.css('top', 0)
					.css('opacity2', 100)
					.hide();

			elemCodeArea = $.createElement( {type:'textarea', id:id + '_CodeArea', css:'', attr:{xGroup:'codearea', className:'codearea', exPass2:'1', exSizable2:'1'}} );
				$(elemCodeArea).css('width', P.width-12)
					.css('height', P.height-38)
					.css('left', 4)
					.css('top', 30)
					.css('opacity2', 100);
				elemCode.appendChild( elemCodeArea );

			elemTemplate.appendChild( elemCode );
		}
	},

	addComponent: function( P )
	{
		var compObj = new emsp_cms.Component( P );
		compObj.parentTemplate = this;

		// 添加到工作区
		this.elemTemplate.appendChild( compObj.elemComponent );

		// 添加到列表
		this.components[compObj.id] = compObj;
		this.setCurrentComponent( compObj );

		Designer.atree_ElemStruct.addItem( {id:this.curComponent.id, text:this.curComponent.data.text, autoExpand:1} );
	},

	removeComponent: function( O )
	{
		if( O )
		{
			with( this )
			{
				$(O.elemComponent).anim({opacity:0},10,
					function()
					{
						components[O.id].parentTemplate.elemTemplate.removeChild( components[O.id].elemComponent );
						delete components[O.id];
					});
			}
		}

		return this;
	},

	// 设置当前模板
	setCurrentComponent: function( S )
	{
		with( this )
		{
			for( var i in components )
			{
				$(components[i].elemComponent).css('borderWidth', 0 );
			}

			if( S )
				$(S.elemComponent).css('border', '1px solid #fff' );
			else
				lastComponent = null;

			curComponent = S;
		}
		return this;
	},

	getCurrentComponent: function()
	{
		return this.curComponent;
	},

	showHtmlCode: function( A )
	{
		with( this )
		{
			A ? $(elemCode).show() : $(elemCode).hide();
		}

		return this;
	},

	showGrid: function( A )
	{
		with( this )
		{
			A ? $(elemGrid).show() : $(elemGrid).hide();
		}
	},

	showSA: function( A )
	{
		with( this )
		{
			A ? $(elemSA).show() : $(elemSA).hide();
		}
	},

	showAnim: function( A )
	{
		with( this )
		{
			m_showAnim = A;
		}
	},

	snapToGrid: function( A )
	{
		with( this )
		{
			m_snapToGrid = A;
		}
	}
}

//
// 模板管理器
//
emsp_cms.TemplateManager = $.newClass();
emsp_cms.TemplateManager.prototype =
{
	constructor: function()
	{
		this.id = $.makeGlobalId( 'CmsTemplateManager' );

		this.templates = new Array();
		this.curTemplate = 0;
	},

	// 创建新模板
	createTemplate: function( P )
	{
		var tempObj = new emsp_cms.Template( P );
		tempObj.parentManager = this;

		// 添加到工作区
		Designer.workspace.elemWorkspace.appendChild( tempObj.elemTemplate );

		// 添加到列表
		this.templates[tempObj.id] = tempObj;
		this.setCurrentTemplate( tempObj );
	},

	// 设置当前模板
	setCurrentTemplate: function( S )
	{
		this.curTemplate = S;
		return this;
	},

	getCurrentTemplate: function()
	{
		return this.curTemplate;
	},

	repaint: function()
	{
		var x = Designer.workspace.factLeft,
			y = Designer.workspace.factTop;
		with( this )
		{
			for( var i in templates )
			{
				$(templates[i].elemTemplate).css('left', x).css('top', y);
				x += 20;
				y += 20;
			}
		}
	}
}

//
// 设计器
//
var Designer =
{
	// 通用控件成员
	dlg_NewTemplate: 0
	,mmn_MainMenu: 0
	,sheets_ProjectWnd: 0
	,atree_ElemStruct: 0
	,lst_Componets: 0
	,proped_CurComp: 0
	,quickTips: 0

	// CMS 控件成员
	,templateManager: 0

	//
	,templateId: -1

	// 辅助
	,aux:
	{
		uiMode: 0,

		about: function()
		{
			alert( 'TemplateDesigner 1.0.0.1 debug\n\nCopyright (C) 2005-2013, EnRich Co.,Ltd.' );
		},

		init: function()
		{
			with( Designer )
			{
				$.urlParam.paramString( location.search.substr(1));
				templateId = $.urlParam.param('templateId');
				if( templateId > -1 )
				{
					alert( '编辑模板: templateId=' + templateId );
				}

				// 对象初始化
				templateManager = new emsp_cms.TemplateManager();

				// 快速提示
				quickTips = new scumix.swat.spark.QuickTips();

				// 主菜单
				mmn_MainMenu = new scumix.swat.spark.MainMenu( {container:'ePanel_MenuBar', animSpeed:15} );
				mmn_MainMenu.addItem( DS_MainMenu );

				// 工作区
				workspace.elemWorkspace = $E('eWorkspace');
				workspace.elemHotCompIndicator = $E('eHotCompIndicator');
				$(workspace.elemHotCompIndicator).css('opacity', 60);

				// 初始化工作页
				sheets_ProjectWnd = new scumix.swat.spark.SheetGroup( {container:'ePanel_Project', animSpeed:5} );
				sheets_ProjectWnd
						.addSheet( {title:'模板属性', elem:['eSheet_TemplateProp']} )
						.addSheet( {title:'元素结构', elem:['eSheet_ElemStruct']} )
						.addSheet( {title:'组件', elem:['eSheet_Comp']} )
						.addSheet( {title:'属性', elem:['eSheet_CompProp']} )
						.showSheet(1);

				// 组件列表
				lst_Componets = new scumix.swat.spark.StackList( DS_Components, 'eSheet_Comp_Content' );

				// 属性编辑器
				proped_CurComp = new scumix.swat.spark.PropertyEditor( {container:'eSheet_CompProp', animLevel:1} );

				// 元素结构树
				atree_ElemStruct = new scumix.swat.spark.ActiveTreeList( {container:'eSheet_ElemStruct', text:'全部元素',
					onClick: function(S)
					{
						if( Designer.templateManager.curTemplate )
						{
							Designer.templateManager.curTemplate.setCurrentComponent( Designer.templateManager.curTemplate.components[S.id] );
						}
					}
					});
			}

			// 初始化组件面板
			var E = '', C, D = DS_Components.nodes;
			for( var i=0; i<D.length; i++ )
			{
				if( !D[i].comps ) continue;
				for( var j=0; j<D[i].comps.length; j++ )
				{
					C = D[i].comps[j];

					var gx = -C.glyph.x
						,gy = C.glyph.y
						,hint = C.hint || '';

					var compId = 'eCOMP_' + D[i].id + '_' + j;
					var oComp = $.createElement({type:'div',id:compId,css:'',attr:{className:'CMS_ComponentItem',title:hint}});
					var oIcon = $.createElement({type:'div',id:compId+'_Icon',css:'',attr:{className:'CMS_ComponentItem_Icon',exDragable:1,xCompGID:i,xCompID:C.id}});
						oIcon.style.background = 'url(' + D[i].glyphSrc + ') no-repeat ' + gx + ' ' + gy;
						oIcon.onmouseover = function(){ this.style.backgroundPositionY=-48 }
						oIcon.onmouseout = function(){ this.style.backgroundPositionY=0 }
						oIcon.ondblclick = function(){ Designer.workspace.addComponent(this) }
						oIcon.OnMove = function( evt, S )
						{
							$(Designer.workspace.elemHotCompIndicator).show();
							Designer.workspace.elemHotCompIndicator.xSrcCompElem = S;
							with( Designer.workspace.elemHotCompIndicator.style )
							{
								left = evt.clientX - 24;
								top = evt.clientY - 24;
								background = S.style.background;
								//cursor = 'not-allowed';
							}

							if( $(Designer.workspace.curTempWnd).ptIn( evt ))
							{
								//Designer.workspace.elemHotCompIndicator.style.cursor = 'default';
							}
						}
					oComp.appendChild( oIcon );
					var oText = $.createElement({type:'div',id:compId+'_Text',css:'',attr:{className:'CMS_ComponentItem_Text'}});
						oText.innerHTML = C.text;
					oComp.appendChild( oText );

					$E(D[i].content).appendChild( oComp );
				}

				// 放下组件事件
				Designer.workspace.elemHotCompIndicator.onmouseup = function()
				{
					evt = $.getEvent();
					$(this).hide();

					// 若在当前模板区内放下, 则添加组件
					if( $(Designer.templateManager.curTemplate.elemTemplate).ptIn( evt ))
					{
						Designer.templateManager.curTemplate.addComponent({
								groupID: this.xSrcCompElem.xCompGID,
								compID: this.xSrcCompElem.xCompID,
								x: evt.clientX,
								y: evt.clientY
								});
					}
				}
			}
		},

		// 重排界面
		alignUI: function()
		{
			$('ePanel_Menu').moveTo( 0, 0 );
			var x = $('ePanel_Menu').css('width'),
				y = $('ePanel_Menu').css('height'),
				dw = document.body.clientWidth,
				dh = document.body.clientHeight;

			with( Designer )
			{
				$('eWorkspace').resizeTo( dw, dh );
				$('ePanel_QuickBar').resizeTo( dw - $('ePanel_Menu').css('width') - 1, 75 ).moveTo( x + 1, 0 );
				$('ePanel_Project').resizeTo( 280, dh - $('ePanel_Menu').css('height') - 1).moveTo( 0, y + 1 );

				workspace.factLeft = $('ePanel_Project').css('width') + 5;
				workspace.factTop = $('ePanel_Menu').css('height') + 5;
				workspace.alignUI();
			}
		},

		// 切换界面显示状态
		toggleUIMode: function()
		{
			this.uiMode = 1 - this.uiMode;
			this.uiMode ? $('ePanel_Menu,ePanel_QuickBar,ePanel_Project').hide() : $('ePanel_Menu,ePanel_QuickBar,ePanel_Project').show();
		}
	},

	// 全局键盘事件处理
	keybHandler: function( E )
	{
		E = E || window.event;
		var K = E.keyCode;
		switch( K )
		{
			case 116: // F5
				Designer.aux.alignUI();
				return false;
				break;

			case 32:
				Designer.workspace.updateWorkspaceInfo();
				return false;
				break;

			case 78: // N
				if( E.altKey ) Designer.dlg_NewTemplate.show();
				break;

			case 82: // R
				if( E.altKey ) Designer.aux.alignUI();
				break;

			case 46: // DELETE
				Designer.workspace.removeComponent();
				break;

			case 113:
			case 115:
				Designer.aux.toggleUIMode();
				break;

			case 48+1:
				Designer.sheets_ProjectWnd.showSheet(0);
				break;

			case 48+2:
				Designer.sheets_ProjectWnd.showSheet(1);
				break;

			case 48+3:
				Designer.sheets_ProjectWnd.showSheet(2);
				break;

			case 48+4:
				Designer.sheets_ProjectWnd.showSheet(3);
				break;

			case 192: // `
				Designer.mmn_MainMenu.items.mn_View.items.mn_View_ShowHtmlCode.onClick( Designer.mmn_MainMenu.items.mn_View.items.mn_View_ShowHtmlCode );
				break;

			//default: $ERR(K); return false;
		}
	},

	// 工作区
	workspace:
	{
		 elemWorkspace: 0
		,elemHotCompIndicator: 0

		,compInstanceId: 0
		,factLeft: 0
		,factTop: 0
		,showGrid: 1
		,showSA: 1
		,gridSize: 10
		,showSA: 1
		,hotCompIndi: 0

		,toggleShowGrid: function()
		{
			with( this )
			{
				var e = Designer.templateManager.curTemplate.elemGrid;
				if( e )
				{
					showGrid = 1 - showGrid;
					showGrid ? $(e).show() : $(e).hide();
				}
			}
		},

		toggleShowSA: function( S )
		{
			with( this )
			{
				var e = Designer.templateManager.curTemplate.elemSA;
				if( e )
				{
					showSA = 1 - showSA;
					showSA ? $(e).show() : $(e).hide();
				}
			}
		},

		toggleShowCode: function()
		{
			var o = $E('chk_ShowCode');
			o.checked = 1 - o.checked;

			if( Designer.templateManager.curTemplate )
			{
				Designer.templateManager.curTemplate.showHtmlCode( o.checked );
			}
		},

		alignUI: function()
		{
			with( this )
			{
				//Designer.sheets_ProjectWnd.repaint();
				if( Designer.templateManager ) Designer.templateManager.repaint();
			}
		},

		addComponent: function( S )
		{
			if( !Designer.templateManager.curTemplate ) return false;
			if( Designer.templateManager.curTemplate.m_showAnim )
			{
				var e = $.getEvent();
				Designer.workspace.elemHotCompIndicator.style.background = S.style.background;
				$(Designer.workspace.elemHotCompIndicator)
					.show()
					.moveTo(e.clientX,e.clientY)
					.anim({
							left:$(Designer.templateManager.curTemplate.elemTemplate).css('left'),
							top:$(Designer.templateManager.curTemplate.elemTemplate).css('top')},
							15,
							function()
							{
								Designer.templateManager.curTemplate.addComponent( {groupID: S.xCompGID, compID:S.xCompID} );
								$(Designer.workspace.elemHotCompIndicator).hide();
							})
					;
			}
			else
			{
				Designer.templateManager.curTemplate.addComponent( {groupID: S.xCompGID, compID:S.xCompID} );
			}
		},

		removeComponent: function()
		{
			with( Designer.templateManager )
			{
				if( curTemplate )
					curTemplate.removeComponent( curTemplate.curComponent );
			}
		},

		updateWorkspaceInfo: function()
		{
			with( Designer.templateManager )
			{
				if( !curTemplate ) return;
				with( curTemplate )
				{
					$E('eInfo').innerHTML =
							'当前模板: ' + id
						+ '<br>当前组件: ' + ( curComponent ? curComponent.id + '(' + curComponent.data.text + ')' : '(none)' )
						;
				}
			}
		},

		updateComponentProperty: function( S )
		{
			Designer.proped_CurComp.clear();
			var D = DS_ComponentProperty.properties;
			for( var i in D )
			{
				Designer.proped_CurComp.addProperty( D[i], S );
			}

			for( var i in S.data.property )
			{
				Designer.proped_CurComp.addProperty( S.data.property[i], S );
			}
		},

		loadTemplate: function()
		{
			Designer.quickTips.info( '正在加载模板数据...' );
			$.ajax.load
				({
					url: '/EMSP_CMS/main/template/queryById',
					param: 'id=1',
					onData: function(R)
					{
						alert(R);
					}

				});
		},

		// 保存模板
		saveTemplate: function()
		{
			if( !Designer.templateManager.curTemplate ) return false;
			with( Designer.templateManager.curTemplate )
			{
				E  = DS_Code.html.HTML_BEGIN;

				E += DS_Code.html.CSS_BEGIN;
				E += DS_Code.html.CSS_CONTENT
						.replace( '{%$TemplateWidth%}', $(elemTemplate).css('width') )
						.replace( '{%$TemplateHeight%}', $(elemTemplate).css('height') );
				E += DS_Code.html.CSS_END;

				E += DS_Code.html.SCRIPT_BEGIN;
				E += DS_Code.html.SCRIPT_END;

				E += DS_Code.html.BODY_BEGIN;

				// 组件
				for( var it in components )
				{
					var C = components[it];
					E += '\n' + C.genHtmlCode();
				}

				E += DS_Code.html.BODY_END;
				E += DS_Code.html.HTML_END;

				elemCodeArea.innerText = E;

				var P = $.urlParam.object2queryString( db )
						+ '&fhtmldata=' + E;
				//document.write(P);
				$.ajax.load
				({
					url2: 'http://localhost/emsp_cms/q.php',
					url: '/EMSP_CMS/main/template/addTemplate',
					param: P,
					onData: function(R)
					{
						alert(R);
					}

				});
			}
		}
	}
}

$.pageResize( function()
{
	Designer.aux.alignUI();
})

$.pageReady( function()
{
	// 初始化
	with( Designer )
	{
		aux.alignUI();
		aux.init();

		lst_Componets.expandeAll();

		// 对话框
		//var dlgfrm = new scumix.swat.spark.border.Box9ng( 'eDialog_NewTemplate', {elem:'eDialogContent_NewTemplate', enableAnim:2});
		dlg_NewTemplate = new scumix.swat.spark.Dialog( null,
			{
				title:'创建新模板',
				elem:'eDialog_NewTemplate',
				enableAnim:0,
				width:642,
				height:450,
				border: 0
			});
	}

	// 绑定 UI 事件
	$('btn_NewTemplate_Ok').event( 'click', function()
		{
			Designer.dlg_NewTemplate.close();
			//Designer.quickTips.warning('新模板已建立');

			Designer.templateManager.createTemplate(
				{
					width:$E('ed_NewTemp_Width').value,
					height:$E('ed_NewTemp_Height').value
					,db:
					{
						fname: $E('ed_NewTemp_Name').value,
						falias: $E('ed_NewTemp_Name').value,
						fauthor: $E('ed_NewTemp_Author').value,
						fdesc: $E('ed_NewTemp_Desc').value,
						fwidth: $E('ed_NewTemp_Width').value,
						fheight: $E('ed_NewTemp_Height').value,
						flayout: 0,
						fdefinition: 'HD'
					}
				});
		});

	$('eCMSLogo').event('click',
		function()
		{
			Designer.aux.about();
		});

	document.onkeydown = Designer.keybHandler;
})

</script>

<body>

<!--工作区-->
<div id="eWorkspace"></div>

<!--主面板-->
<div id="ePanel_Menu"
	class="Panel_H"
	exDragable="1" exTopOnDrag="1">

	<!--Logo 按钮-->
	<div id="eCMSLogo"
		style="position:absolute;left:8px;top:4px;width:142px;height:37px;background:url(assets/images/cms_logo_btn.png) no-repeat 0 0"
		onmouseover="this.style.backgroundPositionY=-37"
		onmouseout="this.style.backgroundPositionY=0"
		onmousedown="this.style.backgroundPositionY=-74"
		onmouseup="this.style.backgroundPositionY=-37"></div>

	<!--菜单-->
	<div id="ePanel_MenuBar" exDragable2="1" exTopOnDrag2="1"></div>
</div>

<!--信息面板-->
<div id="ePanel_Info"
	class="Panel_V"
	exDragable="1" exTopOnDrag="1" exSizable="1">

	<div id="eInfo" style="width:100%;height:100%;font:normal 12px Consolas;color:#ccc;cursor:default" exPass="1"></div>
</div>

<!--工具栏-->
<div id="ePanel_QuickBar"
	class="Panel_H"
	exDragable="1" exTopOnDrag="1">

	<button onclick="Designer.workspace.saveTemplate()">保存模板(S)</button>
	<button onclick="Designer.workspace.loadTemplate()">加载模板</button>
</div>

<!--工程信息窗口-->
<div id="ePanel_Project"
	class="Panel_V"
	exDragable="1" exTopOnDrag="1" exSizable="0" exSizeDir="LR">

<!--工作页-->
<div id="eSheet_TemplateProp"
	class="ePanel_Project_Sheet"
	exDragable='1' exPass='1'>eSheet_TemplateProp</div>

<div id="eSheet_ElemStruct"
	class="ePanel_Project_Sheet"></div>

<div id="eSheet_Comp"
	class="ePanel_Project_Sheet">
	<div style="height:5px;font-size:0px"
		xTag="0"
		onclick="this.xTag = 1 - this.xTag; this.xTag == 1 ? Designer.lst_Componets.expandeAll() : Designer.lst_Componets.collapseAll()"></div>
	<div id="eSheet_Comp_Content"></div>
</div>

<div id="eSheet_CompProp"
	class="ePanel_Project_Sheet"></div>

</div>

<!--组件控件容器-->
<div id="eComp_Layout" class=""></div>
<div id="eComp_Text" class=""></div>
<div id="eComp_Image" class=""></div>
<div id="eComp_Button" class=""></div>
<div id="eComp_Media" class=""></div>
<div id="eComp_Extension" class=""></div>

<!--组件拖动指示器-->
<div id="eHotCompIndicator"></div>

<!--Dialog BEGIN 新建模板-->
<div id="eDialog_NewTemplate" class="SxDialog" exDragable="1" exPass="1" style="background:#34383e;padding:30px">
	<div class="CMS_CtrlRow">
		<div class="caption">模板名称:</div><div><input id="ed_NewTemp_Name" type="text" value="untitled"/></div>
	</div>
	<div class="CMS_CtrlRow">
		<div class="caption">模板宽度:</div>
		<div><input id="ed_NewTemp_Width" type="text" value="1024" style="width:60px"/></div>
		<div class="cap2">模板高度:</div>
		<div><input id="ed_NewTemp_Height" type="text" value="768" style="width:60px"/></div>
	</div>
	<div class="CMS_CtrlRow">
		<div class="caption">搜索标签:</div><div><input id="ed_NewTemp_SearchKey" type="text" value=""/></div>
	</div>
	<div class="CMS_CtrlRow">
		<div class="caption">作者:</div><div><input id="ed_NewTemp_Author" type="text" value="admin"/></div>
	</div>
	<div class="CMS_CtrlRow">
		<div class="caption">模板说明:</div><div><textarea id="ed_NewTemp_Desc" rows="5" style="overflow:hidden"></textarea></div>
	</div>
	<div class="CMS_CtrlRow" style="margin-top:50px">
		<button id="btn_NewTemplate_Ok">确定</button><button onclick="Designer.dlg_NewTemplate.hide()">取消</button>
	</div>
</div>
<!--Dialog END 新建模板-->

</body>
</html>